<template>
  <div>
    <!-- 搜索 -->
    <Search
      @click="
        $refs.aa.show();
        model = {};
      "
    >
      添加用户
    </Search>
    <!-- 表格 -->
    <Table
      :cols="cols"
      row-key="id"
      :data="list"
      :tp="{ hasChildren: 'hasChildren', children: 'abc' }"
    >
      <template v-slot:menus="{ row }">
        <Tags :children="row.children" @close="getdelTags(row, $event)" />
      </template>

      <template v-slot:action="{ row }">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-edit"
          @click="
            $refs.aa.show();
            model = { ...row };
          "
          >编辑</el-button
        >
        <el-button
          type="danger"
          size="mini"
          icon="el-icon-delete"
          @click="getdelRoles(row)"
          >删除</el-button
        >
        <el-button
          type="warning"
          size="mini"
          icon="el-icon-star-off"
          @click="
            getMenusList();
            model = { ...row };
          "
          >分配权限</el-button
        >
      </template>
    </Table>

    <DF
      :title="title + '角色'"
      ref="aa"
      @confirm="getaddRoles"
      v-model="model"
      :opts="opts"
    />

    <Dialog ref="dia" title="分配权限" @confirm="getupdataRights">
      <el-tree
        ref="tree"
        :data="menus"
        show-checkbox
        node-key="id"
        :props="{ label: 'authName', children: 'children' }"
        :default-checked-keys="keys"
        default-expand-all
      >
      </el-tree>
    </Dialog>
  </div>
</template>

<script>
import {
  Roleslist,
  addRoles,
  updataRoles,
  delRoles,
  getMenus,
  updataRights,
  delTags,
} from "api/role";

import Tags from "./components/Tabg.vue";

export default {
  components: { Tags },
  name: "users",
  data() {
    return {
      /**
       * 表格配置项
       */
      cols: [
        {
          type: "expand",
          title: "",
          slot: "menus",
        },
        {
          type: "index",
          title: "#",
        },
        {
          title: "商品名称",
          name: "roleName",
        },
        {
          title: "角色描述",
          name: "roleDesc",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      /**
       * 表单配置项
       */
      opts: {
        roleName: {
          title: "商品名称",
          ph: "请输入商品名称",
          required: true,
          max: 8,
          rules: [{ min: 2 }],
        },
        roleDesc: {
          title: "商品描述",
          ph: "请输入商品描述",
          required: true,
          max: 30,
          rules: [{ min: 2 }],
        },
      },
      /**
       * 添加用户数据
       */
      model: {},
      /**
       * 权限数据
       */
      menus: [],

      keys: [],
    };
  },
  methods: {
    /**
     * 删除标签
     */
    async getdelTags({ roleName, id }, { authName, id: rid }) {
      let res;
      try {
        res = await this.$myconfirm(
          `您确定要删除【${roleName}】的【${authName}】的权限吗？`
        );
        await delTags(id, rid);
        this.$m.success("权限删除成功");
        this.getRolesList();
      } catch (error) {}
      res && res();
    },
    /**
     * 添加菜单
     */
    async getupdataRights() {
      const dd = this.$refs.dia;
      try {
        const tree = this.$refs.tree;
        const keys = [...tree.getCheckedKeys(), ...tree.getHalfCheckedKeys()];
        dd.start();
        await updataRights(this.model.id, keys.join(","));
        this.$m.success("权限分配成功");
        this.getRolesList();
        dd.hide();
      } catch (error) {}
      dd.stop();
    },
    /**
     * 获取菜单
     */
    async getMenusList() {
      try {
        console.log(123);
        this.queryloading = true;
        this.menus = await getMenus();

        this.keys.splice(0, Infinity);

        const deep = (children) => {
          for (const child of children) {
            if (child.children) {
              deep(child.children);
            } else {
              this.keys.push(child.id);
            }
          }
        };
        deep(this.model.children);
        console.log(this.keys);
        this.$refs.dia.show();
      } catch (error) {
        console.log(error);
      }
      this.queryloading = false;
    },
    /**
     * 删除角色
     */
    async getdelRoles({ id, roleName }) {
      let res;
      try {
        res = await this.$myconfirm(`你确定要删除【${roleName}】吗`);
        await delRoles(id);
        this.$m.success("删除成功");
        this.getRolesList();
      } catch (error) {}
      res && res();
    },
    /**
     * 添加角色
     */
    async getaddRoles() {
      const add = this.$refs.aa;
      try {
        add.start();
        await (this.model.id ? updataRoles : addRoles)(this.model);
        add.hide();
        this.getRolesList();
        this.$m.success(this.title + "成功");
      } catch (error) {
        console.log(error);
      }
      add.stop();
    },

    /**
     * 获取角色数据
     */
    async getRolesList() {
      try {
        this.queryloading = true;
        this.list = await Roleslist();
      } catch (error) {}
      this.queryloading = false;
    },
  },
  created() {
    this.getRolesList();
  },
  computed: {
    /**
     * 标题
     */
    title() {
      return this.model.id ? "修改" : "添加";
    },
  },
};
</script>

<style lang="scss" scoped>
.searchbox {
  display: flex;
  .input {
    width: 368px;
    margin-right: 15px;
  }
}
</style>